<div [@routerTransition]>

    <div class="content d-flex flex-column flex-column-fluid">
        <!-- 弹窗 -->
        <div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal"
            class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form #matchInfoForm="ngForm" novalidate (ngSubmit)="batchSave()" autocomplete="off">
                        <div class="modal-header">
                            <h4 class="modal-title">
                                <span>{{l("batchOperation")}}</span>
                            </h4>
                            <button type="button" class="close" (click)="close()" aria-label="Close">
                                <i aria-hidden="true" class="ki ki-close"></i>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group m-form__group align-items-center">
                                        <label>{{l('discountType')}}</label>
                                        <div class="input-group">
                                            <select class="form-control" [(ngModel)]="batchDiscountType"
                                                name="batchDiscountType" required>
                                                <option value="0">{{l('Voucher')}}</option>
                                                <option value="1">{{l('Discount')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <label>{{l('value')}}</label>
                                    <input class="form-control" type="number" name="batchDiscountValue"
                                        [(ngModel)]="batchDiscountValue" required>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button [disabled]="saving" type="button" class="btn btn-primary"
                                (click)="close()">{{l("Cancel")}}</button>
                            <button type="submit" class="btn btn-primary blue" [disabled]="!matchInfoForm.form.valid"
                                [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                                <i class="fa fa-save"></i>
                                <span>{{l("Save")}}</span>
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>





        <!-- 正文 -->
        <sub-header [title]="l('PromotionActivity') + l('Product')" [description]="name">
            <div role="actions">
                <button class="btn btn-primary" (click)="addProduct()">
                    <i class="fa fa-plus"></i>
                    {{l("add")}}{{l("Product")}}</button>
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">

                    <div class="row">
                        <form class="horizontal-form" autocomplete="off">
                            <div>
                                <div class="row align-items-center mb-4">
                                    <div class="col-2">
                                        <div class="form-group m-form__group align-items-center">
                                            <label>{{l('name')}}</label>
                                            <div class="input-group">
                                                <input (keyup.enter)="search()" [(ngModel)]="filterText"
                                                    name="filterText" autoFocus class="form-control m-input"
                                                    [placeholder]="l('SearchWithThreeDot')" type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group m-form__group align-items-center">
                                            <label>&nbsp;</label>
                                            <div class="input-group">
                                                <button type="button" class="btn btn-primary"
                                                    [buttonBusy]="primengTableHelper.isLoading" (click)="search()">
                                                    <i class="la la-refresh"></i>
                                                    {{l("search")}}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6"></div>
                                    <div class="col-2 text-right">
                                        <div class="form-group m-form__group align-items-center">
                                            <!-- <label>&nbsp;</label> -->
                                            <!-- <div class="input-group"> -->
                                            <button type="button" class="btn btn-primary"
                                                [buttonBusy]="primengTableHelper.isLoading" (click)="batchOperation()"
                                                style="margin-top:2rem;">
                                                <i class="la la-refresh"></i>
                                                {{l("batchOperation")}}
                                            </button>
                                            <!-- </div> -->
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="row align-items-center">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable (onLazyLoad)="getProductPromotions($event)"
                                [value]="primengTableHelper.records"
                                [rows]="primengTableHelper.defaultRecordsCountPerPage" [(selection)]="selectedList"
                                [paginator]="false" [lazy]="true"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width:5%">{{l('Actions')}}</th>
                                        <th style="width: 5.0em">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width:5%">{{l('RecordId')}}</th>
                                        <th>{{l('Image')}}</th>
                                        <th>{{l('name')}}</th>


                                        <th style="width:10%">{{l('originalPrice')}}</th>

                                        <th style="width:10%">{{l('discountType')}}</th>
                                        <th style="width:10%">{{l('value')}}</th>

                                        <th style="width:10%">{{l('promPrice')}}</th>

                                    </tr>
                                </ng-template>
                            </p-table>
                        </div>
                        <form #ProgramsForm="ngForm" name="CommonForm" novalidate (ngSubmit)="save()"
                            autocomplete="off">

                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading"
                                style="max-height:400px;overflow:auto;">
                                <p-table #dataTable (onLazyLoad)="getProductPromotions($event)"
                                    [value]="primengTableHelper.records"
                                    [rows]="primengTableHelper.defaultRecordsCountPerPage" [(selection)]="selectedList"
                                    [paginator]="false" [lazy]="true"
                                    [resizableColumns]="primengTableHelper.resizableColumns"
                                    [responsive]="primengTableHelper.isResponsive">
                                    <ng-template pTemplate="body" let-record let-i="rowIndex">
                                        <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                            <td style="width:5%">
                                                <div class="btn-group dropdown">
                                                    <button class="btn btn-sm btn-primary" (click)="delete(record,i)">
                                                        {{l("Delete")}}
                                                    </button>
                                                </div>
                                            </td>
                                            <td style="width: 5.0em">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width:5%"> {{transIndex(i)}}</td>
                                            <td>
                                                <img [src]="fixFileUrl(record.product.picUrl)"
                                                    (error)="showEmpty($event)" />
                                            </td>
                                            <td>
                                                <span>{{record.product.title}}</span>
                                            </td>
                                            <td style="width:10%">
                                                <span>{{record.product.price}}</span>
                                            </td>

                                            <td style="width:10%">
                                                <select class="form-control" [(ngModel)]="record.discountType"
                                                    [name]="'discountType'+record.id" required
                                                    (ngModelChange)="changeType(record)">
                                                    <option value="0">{{l('Voucher')}}</option>
                                                    <option value="1">{{l('Discount')}}</option>
                                                </select>
                                            </td>

                                            <td style="width:10%">
                                                <input class="form-control" type="number"
                                                    [name]="'discountValue'+record.id"
                                                    [(ngModel)]="record.discountValue" required
                                                    (ngModelChange)="changeValue(record)">
                                            </td>

                                            <td style="width:10%">
                                                <span>{{record.price}}</span>
                                            </td>
                                        </tr>
                                    </ng-template>

                                    <ng-template pTemplate="emptymessage" let-records>
                                        <tr *ngIf="primengTableHelper.records">
                                            <td colspan="8" class="text-center">
                                                <img class="emptymessage"
                                                    src="/assets/common/images/placeholder/productHolder.png" />
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>

                            <div class="primeng-datatable-container" style="margin-top:30px;">
                                <div class="primeng-paging-container">
                                    <span class="total-records-count">
                                        {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                    </span>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button [disabled]="saving" type="button" class="btn btn-primary"
                                    (click)="goBack()">{{l("Cancel")}}</button>
                                <button type="submit" class="btn btn-primary blue" [disabled]="!ProgramsForm.form.valid"
                                    [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                                    <i class="fa fa-save"></i>
                                    <span>{{l("Save")}}</span>
                                </button>
                            </div>

                        </form>


                    </div>

                </div>
            </div>
        </div>
        <promotionGridModal #promotionGridModal (modalSave)="selectProduct($event)"></promotionGridModal>
    </div>



</div>